<template>
  <div class="u-page mai-conversation-add">
    <!-- 🎯 页面顶部导航栏 -->
    <div class="conversation_head_weichat">
      <!-- 返回按钮 -->
      <div @click="goBack()" class="conversation_head_back_button_weichat">
        <img src="/static/icon/common/return-icon.png" />
      </div>
      
      <!-- 页面标题 -->
      <div class="conversation_head_title_weichat">发起群聊</div>
      
      <!-- 确定按钮 -->
<!--      <div class="conversation_head_send_button_weichat">-->
<!--        <u-button type="success" text="确定" @click="creatQun" />-->
<!--      </div>-->
    </div>

    <!-- 🔍 搜索框区域 -->
    <view>
      <u-row customStyle="margin-bottom: 10px">
<!--        <div class="searh-input" style="width: 96%; margin: 8px;">-->
<!--          <u&#45;&#45;input-->
<!--            placeholder="搜索"-->
<!--            border="surround"-->
<!--            v-model="phone"-->
<!--            @update:modelValue="change"-->
<!--          ></u&#45;&#45;input>-->
<!--        </div>-->
        <div style="display: flex; align-items: center; width: 96%; margin: 8px; gap: 8px;">
          <div class="searh-input" style="flex: 1;">
            <u--input
                placeholder="搜索"
                border="surround"
                v-model="phone"
                @update:modelValue="change"
            ></u--input>
          </div>
          <!-- 确定按钮 -->
          <div>
            <u-button type="success" text="确定" @click="creatQun" />
          </div>
        </div>

      </u-row>
    </view>

    <!-- 💡 提示语句 -->
    <view class="search-result-no" style="border-bottom: 1px solid #eee; height: 30px;">
      <u--text text="选择群聊中的朋友" style="margin-left: 8px;"></u--text>
    </view>

    <!-- 📋 默认好友列表（按字母分组显示） -->
    <view v-if="!contactSearchResult" class="search-result">
      <!-- 复选框组，用于多选好友 -->
		<u-checkbox-group  style="width: 100%;" v-model="selectedUserIds">
		  <div
			v-for="contactListItem in friendsList"
			:key="contactListItem.renderKey"
			class="show_friend_list"
			style="margin-left: 8px;"
		  >
			<!-- 分组标题 -->
			<div v-if="!isValidContactItem(contactListItem)" class="friend_list_zimu">
			  {{ contactListItem.letter }}
			</div>
		
			<!-- 好友项 -->
			<div v-else class="friend_list_ren" @click.stop="">
			  <!-- ✅ u-checkbox 放左边，设置样式为小圆点 -->
			  <u-checkbox
				shape="circle"
				:name="contactListItem.userID"
				activeColor="#00C777"
				:customStyle="{
				  marginRight: '8px',
				  transform: 'scale(0.8)'
				}"
			  ></u-checkbox>
		
			  <!-- 头像 -->
			  <img class="check_head_img" :src="generateAvatar(contactListItem)" />
		
			  <!-- 昵称 -->
			  <p class="check_head_username">
				{{ contactListItem.userID || contactListItem.nick }}
			  </p>
			</div>
		  </div>
		</u-checkbox-group>
    </view>

    <!-- 🔎 搜索结果区域（当有搜索时显示） -->
    <view v-if="contactSearchResult" class="search-result">
      <!-- 如果无结果 -->
      <template v-if="isContactSearchNoResult">
        {{ TUITranslateService.t("TUIContact.无搜索结果") }}
      </template>
    
      <!-- 如果有搜索结果 -->
      <template v-else>
        <u-checkbox-group style="width: 100%;" v-model="selectedUserIds">
          <div
            v-for="contact in contactSearchResult.user.list"
            :key="contact.renderKey"
            class="show_friend_list"
            style="margin-left: 8px;"
          >
            <div class="friend_list_ren">
              <u-checkbox
                shape="circle"
                :name="contact.userID"
                activeColor="#00C777"
                :customStyle="{
                  marginRight: '8px',
                  transform: 'scale(0.8)'
                }"
              ></u-checkbox>
    
              <img class="check_head_img" :src="generateAvatar(contact)" />
              <p class="check_head_username">
                {{ contact.userID || contact.nick }}
              </p>
            </div>
          </div>
        </u-checkbox-group>
      </template>
    </view>

  </div>
</template>

<script lang="ts" setup>
// 📦 导入腾讯云IM相关模块
import {
  TUITranslateService,  // 翻译服务
  TUIStore,            // 状态管理
  StoreName,           // 存储名称枚举
  IGroupModel,         // 群组模型接口
  TUIFriendService,    // 好友服务
  Friend,              // 好友类型
  FriendApplication,   // 好友申请类型
  TUIUserService,      // 用户服务
} from '@tencentcloud/chat-uikit-engine';

// 📦 导入接口类型定义
import {
  IContactList,        // 联系人列表接口
  IContactSearchResult,// 联系人搜索结果接口
  IBlackListUserItem,  // 黑名单用户项接口
  IUserStatus,         // 用户状态接口
  IUserStatusMap,      // 用户状态映射接口
  IContactInfoType,    // 联系人信息类型接口
} from '/TUIKit/interface';

// 📦 导入核心模块和常量
import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
import { TUIGlobal } from '@tencentcloud/universal-api';

// 📦 导入uni-app生命周期钩子
import { onHide, onLoad, onUnload } from '@dcloudio/uni-app';

// 📦 导入Vue 3组合式API
import { 
  ref, 
  computed, 
  onMounted, 
  onUnmounted, 
  provide 
} from '/TUIKit/adapter-vue';

// 📦 导入工具函数
import { 
  generateAvatar,        // 生成头像函数
  generateName,          // 生成名称函数
  acceptFriendApplication // 接受好友申请函数
} from '/pages/contact/utils/index';

// 📦 导入拼音工具组件
import { getInitials } from '/utils/pinyinHelper'

import TUIConversationServer from "/pages/conversation/server";
import { CONV_CREATE_TYPE } from '@tencentcloud/chat-uikit-uniapp/constant';

// ==============================
// 📊 响应式数据定义
// ==============================

/** 搜索输入框的值 */
const phone = ref<string>('');

/** 已选中的用户ID数组 */
const selectedUserIds = ref<string[]>([]);

/** 测试用头像URL */
const testHeadImgUrl = ref<string>("https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png");

/** 当前联系人列表的键名 */
const currentContactListKey = ref<keyof IContactList>('');

/** 当前联系人信息 */
const currentContactInfo = ref<IContactInfoType>({} as IContactInfoType);

/** 联系人搜索状态 */
const contactSearchingStatus = ref<boolean>(false);

/** 联系人搜索结果 */
const contactSearchResult = ref<IContactSearchResult>();

/** 是否显示在线状态 */
const displayOnlineStatus = ref<boolean>(false);

/** 用户在线状态映射 */
const userOnlineStatusMap = ref<IUserStatusMap>();

/** 好友列表（按字母排序） */
const friendsList = ref<IGroupModel[]>();

// ==============================
// 🔧 计算属性
// ==============================

/** 判断联系人搜索是否无结果 */
const isContactSearchNoResult = computed((): boolean => {
  return (
    !contactSearchResult?.value?.user?.list[0] &&
    !contactSearchResult?.value?.group?.list[0]
  );
});

// ==============================
// 🪝 生命周期钩子
// ==============================

/** 组件挂载时执行 */
onMounted(() => {
  // 监听好友列表变化
  TUIStore.watch(StoreName.FRIEND, {
    friendList: onFriendListUpdated,
  });
});

/** 组件卸载时执行 */
onUnmounted(() => {
  // 取消监听好友列表变化
  TUIStore.unwatch(StoreName.FRIEND, {
    friendList: onFriendListUpdated,
  });
});

// ==============================
// 🛠️ 工具方法
// ==============================

/**
 * 判断是否为有效的联系人项
 * @param item 联系人项对象
 * @returns 是否为有效联系人
 */
function isValidContactItem(item: any): boolean {
  return item?.userID || item?.groupID || item?.customID;
}

/**
 * 好友列表更新回调函数
 * @param friendList 更新后的好友列表
 */
function onFriendListUpdated(friendList: Friend[]): void {
  // 对好友列表进行字母排序处理
  const newFriendList = getInitials(friendList);
  friendsList.value = newFriendList;
}

/**
 * 搜索输入事件处理
 */
// const change = (): void => {
//   console.log('搜索关键词:', phone.value);
//   // TODO: 实现搜索逻辑
// };

const change = (): void => {
  const keyword = phone.value.trim().toLowerCase();
  console.log('搜索关键词:', phone.value);
  if (!keyword) {
    contactSearchResult.value = undefined;
    return;
  }

  // 搜索逻辑：从原始好友列表中过滤出匹配的项
  const matchedList = friendsList.value
    ?.filter(item => {
      const name = item.nick?.toLowerCase() || '';
      const userID = item.userID?.toLowerCase() || '';
      return name.includes(keyword) || userID.includes(keyword);
    })
    ?.map(item => ({
      ...item,
      renderKey: `${item.userID}-search` // 避免 key 重复
    }));

  // 搜索结果为空
  if (!matchedList || matchedList.length === 0) {
    contactSearchResult.value = {
      user: {
        list: [],
      },
      group: {
        list: [],
      },
    };
  } else {
    // 用一个虚拟的搜索结果结构包裹起来
    contactSearchResult.value = {
      user: {
        list: matchedList,
      },
      group: {
        list: [],
      },
    };
  }
};

/**
 * 创建群聊事件处理
 */
const creatQun = (): void => {
  console.log('选中的用户ID:', selectedUserIds.value);
  
  // 把用户ID转换为 { userID: 'xxx' } 格式
  const memberList = selectedUserIds.value.map(userID => ({ userID }));

  if (memberList.length === 0) {
    uni.showToast({ title: '请选择好友', icon: 'none' });
    return;
  }

  // 调用创建群聊方法
  TUIConversationServer.getInstance().createGroup(memberList);
};


/**
 * 返回上一页
 */
const goBack = (): void => {
  // TODO: 实现返回逻辑
  uni.navigateBack();
};
</script>

<!-- 🎨 引入外部样式文件 -->
<style lang="scss" scoped src="./style/index.scss"></style>

<!-- 🎨 页面样式定义 -->
<style scoped>
/* 🏠 主容器样式 */
.mai-conversation-add {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #f9f9f9;
  overflow: hidden;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

/* 🎯 顶部导航栏样式 */
.conversation_head_weichat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top) 12px 0 12px; /* 适配安全区域 */
  height: calc(44px + env(safe-area-inset-top));
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
}

/* 🔙 返回按钮图标样式 */
.conversation_head_back_button_weichat img {
  width: 24px;
  height: 24px;
}

/* 🔙 返回按钮和确定按钮容器样式 */
.conversation_head_back_button_weichat,
.conversation_head_send_button_weichat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
}

/* 📝 标题样式 */
.conversation_head_title_weichat {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  text-align: center;
  line-height: 44px;
  color: #222;
}

/* 📋 搜索结果容器样式 */
.search-result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 👥 好友列表项容器样式 */
.show_friend_list {
  width: 96%;
  overflow: hidden;
}

/* 🔤 字母分组标题样式 */
.friend_list_zimu {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #f8f8f8;
  padding-left: 12px;
}

/* 👤 好友项样式 */
.friend_list_ren {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
}

/* ☑️ 复选框容器样式 */
.check_box {
  width: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 🖼️ 头像样式 */
.check_head_img {
  width: 58px;
  height: 58px;
  margin-right: 8px;
  border-radius: 4px;
  object-fit: cover;
}

/* 📛 用户名样式 */
.check_head_username {
  flex: 1;
  border-bottom: 1px solid #eee;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  color: #333;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 🔍 搜索框样式优化 */
.searh-input {
  border-radius: 8px;
  background-color: #fff;
}

/* 💡 提示语样式 */
.search-result-no {
  background-color: #f8f8f8;
  padding: 8px 0;
  font-size: 14px;
  color: #666;
}

:deep(.u-checkbox__icon-wrap) {
  margin: 0 !important;
}

:deep(.u-checkbox) {
  align-items: center;
  padding: 0 !important;
}

:deep(.u-checkbox__label) {
  display: none; /* 不显示文字标签 */
}

</style>